<template>
  <div>
    <p>eat：{{ obj.hobby.eat}}</p>
    <button @click="obj = { hobby: {eat: '🍜' } }">面条</button>
  </div>
</template>

<script>
import { watch, ref, reactive } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    // !watch 监听 ref 类型数据，默认监听的只是第一层，谁是第一层？obj.value 才是一层
    watch(obj, () => {
      console.log(1)
    })
    return {obj}
  }
}
</script>

<style lang="scss" scoped>

</style>